<template>
    <div>
      <el-row>
        <el-button v-if="hasPermission('lora:area:jfLoraArea:add')" type="primary" size="small" icon="el-icon-plus"
          @click="add()">新建</el-button>
      </el-row>
      <el-table :data="dataList" size="medium" row-key="id" v-loading="loading" class="table">
        <el-table-column prop="name" show-overflow-tooltip label="名称">
        </el-table-column>
        <el-table-column prop="floorName" show-overflow-tooltip label="楼层">
          <template slot-scope="scope">
             <span>{{scope.row.buildingName}}-{{scope.row.floorName}}</span>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" fixed="right" width="300" label="操作">
          <template slot-scope="scope">
            <el-button v-if="hasPermission('lora:area:jfLoraArea:view')" type="text" size="small" icon="el-icon-view"
              @click="view(scope.row.id)">查看</el-button>
            <el-button v-if="hasPermission('lora:area:jfLoraArea:edit')" type="text" size="small" icon="el-icon-edit"
              @click="edit(scope.row.id)">修改</el-button>
            <el-button v-if="hasPermission('lora:area:jfLoraArea:del')" type="text" size="small" icon="el-icon-delete"
              @click="del(scope.row.id)">删除</el-button>
            <el-button v-if="hasPermission('lora:area:jfLoraArea:add')" type="text" size="small"
              icon="el-icon-circle-plus-outline" @click="addChild(scope.row.id, scope.row.name)">添加下级区域</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 弹窗, 新增 / 修改 -->
      <JfLoraAreaForm ref="jfLoraAreaForm" @refreshDataList="refreshList"></JfLoraAreaForm>
    </div>
  </template>

  <script>
    import TableTreeColumn from '@/components/table-tree-column'
    import JfLoraAreaForm from './JfLoraAreaForm'
    export default {
      data() {
        return {
          dataList: [],
          loading: false
        }
      },
      components: {
        TableTreeColumn,
        JfLoraAreaForm
      },
      activated() {
        this.refreshList()
      },

      methods: {
        // 获取数据列表
        refreshList() {
          this.loading = true
          this.$http({
            url: '/lora/area/jfLoraArea/list',
            method: 'get'
          }).then(({
            data
          }) => {
            this.dataList = this.treeDataTranslate(data.list, 'id', 'parentId', 'children')
            this.loading = false
          })
        },
        // 新增下级
        addChild(id, name) {
          this.$refs.jfLoraAreaForm.init('addChild', {
            id: '',
            parent: {
              id: id,
              name: name
            }
          })
        },
        // 新增
        add() {
          this.$refs.jfLoraAreaForm.init('add', {
            id: '',
            parent: {
              id: '',
              name: ''
            }
          })
        },
        // 修改
        edit(id) {
          this.$refs.jfLoraAreaForm.init('edit', {
            id: id,
            parent: {
              id: '',
              name: ''
            }
          })
        },
        // 查看
        view(id) {
          this.$refs.jfLoraAreaForm.init('view', {
            id: id,
            parent: {
              id: '',
              name: ''
            }
          })
        },
        // 删除
        del(id) {
          this.$confirm(`确定删除所选项吗?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.loading = true
            this.$http({
              url: '/lora/area/jfLoraArea/delete',
              method: 'delete',
              params: {
                'id': id
              }
            }).then(({
              data
            }) => {
              if (data && data.success) {
                this.$message.success(data.msg)
                this.refreshList()
              }
              this.loading = false
            })
          })
        }
      }
    }
  </script>
